<template>
	<view>
		<u-navbar
			title="余额充值"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="padding: 32rpx;">
				<view :style="{backgroundColor: appColor}" class="recharge-header">
					<view class="recharge-header-1">
						<view class="recharge-header-1-1">账号余额</view>
						<view class="recharge-header-1-2">
						<u-count-to duration="1000" bold color="#fff" :decimals="2" :startVal="startBalance" :endVal="endBalance"></u-count-to>
						</view>
						<text class="icon iconfont icon-yue"></text>
					</view>
					<view class="recharge-header-2">
						<view class="recharge-header-2-1" @click="toPage({url: '/pages/me/rechargeRecord'})">
							<text>交易记录</text>
							<text style="position: relative;top: 2rpx;" class="iconfont icon-youjiantou"></text>
						</view>
						<view class="recharge-header-2-1" @click="toPage({url: '/pages/me/waterRecord'})">
							<text>流水记录</text>
							<text style="position: relative;top: 2rpx;" class="iconfont icon-youjiantou"></text>
						</view>
					</view>
				</view>
				<view class="title">充值金额</view>
				<view class="recharge-item-box">
					<view @click="cur = index" :style="{backgroundColor: cur === index ? appColor: '#f5f5f5'}" v-for="(recharge, index) in appInfo.rechargeGiveRule" :key="index" class="recharge-item">
						<view class="recharge-item-1" :style="{color: cur === index ? '#fff' : '#000', fontWeight: cur === index ? 'bold' : 'normal'}">
							<text>{{recharge.money}}</text>
							<text style="font-size: 28rpx;padding-left: 8rpx;">元</text>
						</view>
						<view v-if="appInfo.rechargeIsGive === '1'" class="recharge-item-2" :style="{color: cur === index ? '#fff' : '#000', fontWeight: cur === index ? 'bold' : 'normal'}">
							<text>送{{recharge.giveMoney}}</text>
							<text>元</text>
						</view>
					</view>
				</view>
				<view class="recharge-remark">
					<view class="title">使用说明</view>
					<view class="recharge-remark-item">
						<u-parse :content="appInfo.rechargeAgreement || '暂无'"></u-parse>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="good-detail-bootom">
			<view style="margin: 0 32rpx;height: 100%;width: calc(100vw - 64rpx);display: flex;align-items: center;justify-content: space-between;">
				<view class="good-detail-bootom-r">
					<u-button @click="submit" :color="appColor" text="立即充值" shape="circle"></u-button>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {balanceRecharge, queryRechargeResult} from '@/api/me.js'
	export default {
		data() {
			return {
				cur: 0, // 当前选中充值
				startBalance: 0,
				endBalance: 0
			}
		},
		computed: {
			...mapState(['appInfo', 'userInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			},
		},
		onLoad() {
			this.endBalance = this.userInfo.balance;
		},
		methods: {
			onLower() {
				if(this.status === 'loading') {
					this.getList();
				}
			},
			// 充值
			submit() {
				const that = this;
				const cur = this.appInfo.rechargeGiveRule[this.cur];
				balanceRecharge({giveRule: cur}).then(res => {
					const {code, message, result} = res;
					if(code === 200) {
						const {nonceStr, packageValue, paySign, timeStamp, signType, id} = result;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp,
							nonceStr,
							package: packageValue,
							signType,
							paySign,
							success: function (res) {
								that.$cuLoading('查询充值结果').then(() => {
									queryRechargeResult({id}).then((res) => {
										const {code, result} = res;
										uni.hideLoading();
										if(code === 200) {
											that.startBalance = that.endBalance;
											that.endBalance = result;
											that.$cuTip('充值成功');
										} else {
											that.$cuTip('请稍后查询');
										}
									})
								})
								// that.$cuTip('充值成功');
							},
							fail: function (err) {
								console.log('fail:' + JSON.stringify(err));
							}
						})
					} else {
						that.$cuTip('请稍后再试');
					}
				})
			},
			toPage({url}) {
				if(!url) return
				this.$cuNavigateTo(url);
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		line-height: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 32rpx;
	}
	.recharge-header {
		height: 200rpx;
		padding: 32rpx;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 32rpx;
		.recharge-header-1 {
			height: calc(100% - 28rpx);
			color: #fff;
			position: relative;
			.icon {
				font-size: 88rpx;
				font-weight: 500;
				color: #fff;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.recharge-header-1-1 {
				font-size: 28rpx;
				line-height: 28rpx;
			}
			.recharge-header-1-2 {
				font-size: 48rpx;
				line-height: 48rpx;
				padding-top: 16rpx;
				font-weight: bold;
			}
		}
		.recharge-header-2 {
			height: 28rpx;
			overflow: hidden;
			display: flex;
			.recharge-header-2-1 {
				color: #fff;
				font-size: 28rpx;
				line-height: 28rpx;
				margin-right: 32rpx;
			}
		}
	}
	
	.recharge-item-box {
		&:after{
		    content:'';
			/* 伪元素添加的标签是行内, 要求块 */
			display:block;
			clear:both;
			/* 补充代码：在网页中看不到伪元素 *//* 为了兼容性 */
			height:0;
			visibility:hidden;
		}
		.recharge-item {
			width: 48%;
			height: 180rpx;
			float: left;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			border-radius: 16rpx;
			&:nth-child(odd) {
				margin-right: 4%;
			}
			.recharge-item-1 {
				font-size: 36rpx;
				line-height: 36rpx;
			}
			.recharge-item-2 {
				font-size: 28rpx;
				line-height: 28rpx;
				margin-top: 32rpx;
			}
		}
	}
	
	.recharge-remark {
		.recharge-remark-item {
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
		.good-detail-bootom-l1 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			.good-detail-bootom-l1-t {
				font-size: 28rpx;
				padding-bottom: 4rpx;
			}
			.good-detail-bootom-l1-b {
				.good-detail-bootom-l1-b-1 {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}
		.good-detail-bootom-r {
			flex: 1;
		}
	}
</style>